<!--评论模块-->
<template>
  <div class="container">


    <!-- 评论列表 -->
    <div class="comment" v-for="item in cms">

      <!-- 编辑模块 -->
      <!-- <div class="write-reply" v-if="item.reply.length > 0" @click="showCommentInput(item)"> -->
      <!-- <div class="write-reply"  @click="showCommentInput(item)">
        <i class="el-icon-edit"></i>
        <span class="add-comment">添加新评论</span>
      </div> -->


      <!-- 评论 -->
      <div class="info">
        <img class="avatar" :src="item.avatarUrl" width="36" height="36"/>
        <div class="right">
          <div class="name">{{item.nickName}}</div>
          <div class="date">{{item.createTime}}</div>
        </div>
      </div>
      <div class="content">{{item.commentContent}}</div>
      <div class="control">
        <span class="like" :class="{active: item.isLike}" @click="likeClick(item)">
          <i class="iconfont icon-like"></i>
          <span class="like-num">{{item.likeNum > 0 ? item.likeNum + '人赞' : '赞'}}</span>
        </span>
        <span class="comment-reply" @click="showCommentInput(item)">
          <i class="iconfont icon-comment"></i>
          <span>回复</span>
        </span>
      </div>

      <!-- 回复 -->
      <div class="reply">
        <div class="item" v-for="reply in item.children">

          <div class="reply-content">
            <span class="from-name">{{reply.nickName}}</span><span>：  </span>
            <span class="to-name" v-if="reply.replyUserNickname != null">@{{reply.replyUserNickname}}</span>
            <span>{{reply.commentContent}}</span>
          </div>
          <div class="reply-bottom">
            <span>{{reply.createTime}}</span>
            <span class="like" :class="{active: item.isLike}" @click="likeClick(reply)">
              <i class="iconfont icon-like"></i>
              <span class="like-num">{{reply.likeNum > 0 ? reply.likeNum + '人赞' : '赞'}}</span>
            </span>
            <span class="reply-text" @click="showCommentInput(item, reply)">
              <i class="iconfont icon-comment"></i>
              <span>回复</span>
            </span>
          </div>

        </div>
      </div>

      <!-- 共8条回复, 点击查看 -->
      <span id="chakan" v-if="item.replyTotalCount > 3">
        <span>共{{ item.replyTotalCount }}条回复, </span>
        <span id="anniu" @click="see(item)">点击查看</span>
        <!-- <input type="button" @click="see(item)" value="点击查看"> -->
      </span>


      <!-- 编辑框 -->
      <transition name="fade">
        <div class="input-wrapper" v-if="showItemId === item.id">
          <el-input class="gray-bg-input"
                    v-model="inputComment"
                    type="textarea"
                    :rows="3"
                    autofocus
                    placeholder="写下你的评论">
          </el-input>
          <div class="btn-control">
            <span class="cancel" @click="cancel">取消</span>
            <el-button class="btn" type="success" round @click="commitComment">确定</el-button>
          </div>
        </div>
      </transition>

    </div>


    <br>
    <br>

    <!-- 分页工具条 -->
    <el-pagination
      :background="background"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />


    <!-- 对话框 -->
    <el-dialog ref="activityForm"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose">

      <el-scrollbar label="chatList" ref="scrollbar" style="height:500px;" wrap-style="overflow-x:hidden;">


      <div class="comment" v-model="comment">
        <!-- 评论 -->
        <div class="info">
          <img class="avatar" :src="comment.avatarUrl" width="36" height="36"/>
          <div class="right">
            <div class="name">{{comment.nickName}}</div>
            <div class="date">{{comment.createTime}}</div>
          </div>
        </div>
        <div class="content">{{comment.commentContent}}</div>
        <div class="control">
          <span class="like" :class="{active: comment.isLike}" @click="likeClick(comment)">
            <i class="iconfont icon-like"></i>
            <span class="like-num">{{comment.likeNum > 0 ? comment.likeNum + '人赞' : '赞'}}</span>
          </span>
          <span class="comment-reply" @click="showCommentInput2(comment)">
            <i class="iconfont icon-comment"></i>
            <span>回复</span>
          </span>
        </div>

        <!-- 回复 -->
        <div class="reply">
          <div class="item" v-for="reply in comment.children">

            <div class="reply-content">
              <span class="from-name">{{reply.nickName}}</span><span>：  </span>
              <span class="to-name" v-if="reply.replyUserNickname != null">@{{reply.replyUserNickname}}</span>
              <span>{{reply.commentContent}}</span>
            </div>
            <div class="reply-bottom">
              <span>{{reply.createTime}}</span>
              <span class="like" :class="{active: comment.isLike}" @click="likeClick(reply)">
                <i class="iconfont icon-like"></i>
                <span class="like-num">{{reply.likeNum > 0 ? reply.likeNum + '人赞' : '赞'}}</span>
              </span>
              <span class="reply-text" @click="showCommentInput2(comment, reply)">
                <i class="iconfont icon-comment"></i>
                <span>回复</span>
              </span>
            </div>

          </div>
        </div>


        <!-- 编辑框 -->
        <transition name="fade">
          <div class="input-wrapper" v-if="showItemId2 === comment.id">
            <el-input class="gray-bg-input"
                      v-model="inputComment"
                      type="textarea"
                      :rows="3"
                      autofocus
                      placeholder="写下你的评论">
            </el-input>
            <div class="btn-control">
              <span class="cancel" @click="cancel">取消</span>
              <el-button class="btn" type="success" round @click="commitComment">确定</el-button>
            </div>
          </div>
        </transition>


      </div>

      </el-scrollbar>
    </el-dialog>

  </div>
</template>

<script>

  import Vue from 'vue'
  import { page, details } from '@/api/cmt.js'

  export default {
    name: 'Comment',
    props: {
      // cms: {
      //   type: Array,
      //   required: true
      // }
    },
    components: {},
    data() {
      return {
        /**
         * 评论
         */
        inputComment: '',
        showItemId: '',
        showItemId2: '',

        cms: [],

        /**
         * 对话框
         */
        dialogVisible: false,
        comment: {},

        /**
         * 分页
         */
        background: true,
        // 每页显示的条数
        pageSize: 5,
        // 总记录数
        totalCount: 100,
        // 当前页码
        currentPage: 1,
      }
    },
    computed: {},
    methods: {
      /**
       * 刷新页面
       */
      page() {
        page(
          this.currentPage,
          this.pageSize
        ).then((res) => {
          this.totalCount = res.data.data.total
          this.cms = res.data.data.records
        })
      },

      /**
       * 分页

       * @param {Object} val
       */
      handleSizeChange(val) {
        // 重新设置每页显示的条数
        this.pageSize = val
        this.page()
      },
      handleCurrentChange(val) {
        // 重新设置当前页码
        this.currentPage = val
        this.page()
      },


      /**
       * 点赞
       */
      likeClick(item) {
        if (item.isLike === null) {
          Vue.$set(item, "isLike", true);
          item.likeNum++
        } else {
          if (item.isLike) {
            item.likeNum--
          } else {
            item.likeNum++
          }
          item.isLike = !item.isLike;
        }
      },

      /**
       * 点击取消按钮
       */
      cancel() {
        this.showItemId = ''
        this.showItemId2 = ''
      },

      /**
       * 提交评论
       */
      commitComment() {
        console.log(this.inputComment);
      },

      /**
       * 点击评论按钮显示输入框
       * item: 当前大评论
       * reply: 当前回复的评论
       */
      showCommentInput(item, reply) {
        if (reply) {
          this.inputComment = "@" + reply.nickName + " "
        } else {
          this.inputComment = ''
        }
        this.showItemId = item.id
      },

      /**
       * 点击评论按钮显示输入框
       * item: 当前大评论
       * reply: 当前回复的评论
       */
      showCommentInput2(item, reply) {
        // this.scrollTo(0,50000);
        // let ele = document.getElementById('dlg')
        // console.log("ele:")
        // console.log(ele.scrollHeight)
        // ele.scrollTop = 500

        const element = document.querySelector('.chatList')
        this.$refs['scrollbar'].wrap.scrollTop = 7000


        if (reply) {
          this.inputComment = "@" + reply.nickName + " "
        } else {
          this.inputComment = ''
        }
        this.showItemId2 = item.id
      },

      /**
       * 查看所有回复

       * @param {Object} item
       */
      see(item) {
        // 发请求
        details(item.id).then((result) => {
          if (result.data.status == 200) {
            this.comment = result.data.data
          }

        })

        // 显示对话框
        this.dialogVisible = true

        // this.comment = item



      }
    },
    // created() {
    //   // console.log(this.cms)
    //   this.page()
    // }

    mounted() { // 钩子方法
      console.log("发送")
      this.page() // 当页面加载完成后，发送异步请求，获取数据
      // findAll().then((result) => { // 请求部门数据
      //   this.deptList = result.data.data
      // })
    },
  }
</script>

<style scoped lang="scss">
  // @import "../../public/scss/index";
  @import "./scssStyle.scss";

  .container {

   // background-color: azure;
    padding: 30 50px;
    box-sizing: border-box;
    .comment {
      display: flex;
      flex-direction: column;
      padding: 15px;
      margin-top: 15px;
      // margin-button: 30px;
      // background-color: antiquewhite;
      // padding-left: 10px;
      // padding-right: 10px;
      // padding-bottom: 30px;

      border-top: 2px solid $border-fourth;
      border-bottom: 2px solid $border-fourth;

      .info {
        display: flex;
        align-items: center;
        .avatar {
          border-radius: 50%;
        }
        .right {
          display: flex;
          flex-direction: column;
          margin-left: 10px;
          .name {
            font-size: 16px;
            color: $text-main;
            margin-bottom: 5px;
            font-weight: 500;
          }
          .date {
            font-size: 12px;
            color: $text-minor;
          }
        }
      }
      .content {
        font-size: 16px;
        color: $text-main;
        line-height: 20px;
        padding: 10px 0;
      }
      .control {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: $text-minor;
        .like {

          display: flex;
          align-items: center;
          margin-right: 20px;
          cursor: pointer;
          &.active, &:hover {
            color: $color-main;
          }
          .iconfont {
            font-size: 14px;
            margin-right: 5px;
          }
        }
        .comment-reply {
          display: flex;
          align-items: center;
          cursor: pointer;
          &:hover {
            color: $text-333;
          }
          .iconfont {
            font-size: 16px;
            margin-right: 5px;
          }
        }

      }
      .reply {
        margin: 10px 0;
        border-left: 2px solid $border-first;
        .item {
          margin: 0 10px;
          padding: 10px 0;
          border-bottom: 1px dashed $border-third;
          .reply-content {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: $text-main;
            .from-name {
              color: $color-main;
            }
            .to-name {
              color: $color-main;
              margin-left: 5px;
              margin-right: 5px;
            }
          }
          .reply-bottom {
            display: flex;
            align-items: center;
            margin-top: 6px;
            font-size: 12px;
            color: $text-minor;

            .like {
              padding-left: 10px;
              padding-right: 5px;

              display: flex;
              align-items: center;
              // margin-right: 20px;
              cursor: pointer;
              &.active, &:hover {
                color: $color-main;
              }
              .iconfont {
                font-size: 14px;
                margin-right: 5px;
              }
            }

            .reply-text {
              display: flex;
              align-items: center;
              margin-left: 10px;
              cursor: pointer;
              &:hover {
                color: $text-333;
              }
              .icon-comment {
                margin-right: 5px;
              }
            }
          }
        }

        // ---
        .write-reply {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: $text-minor;
          padding: 10px;
          cursor: pointer;
          &:hover {
            color: $text-main;
          }
          .el-icon-edit {
            margin-right: 5px;
          }
        }
        .fade-enter-active, fade-leave-active {
          transition: opacity 0.5s;
        }
        .fade-enter, .fade-leave-to {
          opacity: 0;
        }
        .input-wrapper {
          padding: 10px;
          .gray-bg-input, .el-input__inner {
            /*background-color: #67C23A;*/
          }
          .btn-control {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-top: 10px;
            .cancel {
              font-size: 16px;
              color: $text-normal;
              margin-right: 20px;
              cursor: pointer;
              &:hover {
                color: $text-333;
              }
            }
            .confirm {
              font-size: 16px;
            }
          }
        }
        // ---
      }

      // ----------
      .write-reply {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: $text-minor;
        padding: 10px;
        cursor: pointer;
        &:hover {
          color: $text-main;
        }
        .el-icon-edit {
          margin-right: 5px;
        }
      }
      .fade-enter-active, fade-leave-active {
        transition: opacity 0.5s;
      }
      .fade-enter, .fade-leave-to {
        opacity: 0;
      }
      .input-wrapper {
        padding: 10px;
        .gray-bg-input, .el-input__inner {
          /*background-color: #67C23A;*/
        }
        .btn-control {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          padding-top: 10px;
          .cancel {
            font-size: 16px;
            color: $text-normal;
            margin-right: 20px;
            cursor: pointer;
            &:hover {
              color: $text-333;
            }
          }
          .confirm {
            font-size: 16px;
          }
        }

      }
      // -----------

    }

  }

  #chakan {
    font-size: 10px;
    #anniu:hover {
      color: $color-main;
    }
  }

</style>
